
import { Button, Modal, Form, Input, message } from 'antd';
import React, { Fragment, useState, useEffect, useMemo } from 'react';
import Uploader from './Upload';
import * as api from '@/api/product'
let flag = false
let rmAvter: any
const Dialog = (props: any) => {
    // console.log('props',props);

    let { getproduct, editContent:{record,editFlag} } = props
    // console.log(record);
    
    // let {cImg , cname} = record

    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);

    //// 初始化图片地址
    const [imgurl, setImgurl] = useState('')

    //// 初始化输入框内容
    let inputValue = ''

    ////创建 form 实例
    const [formContent] = Form.useForm()

    const [title, setTitle] = useState('添加信息')
    // //// 保存一个全局的状态  类似于一个开关，让useEffect初次渲染时不调用
    // const firstUpdate = useRef(true);
    // useEffect(() => {
    //     if (firstUpdate.current) {
    //         console.log('firstUpdate', firstUpdate);
    //         ////   赋值为false
    //         firstUpdate.current = false;
    //         return;
    //     } else {
    //         // onFinish({ content, imgurl })
    //     }
    // }, [content])


    // #ff0000  重置添加
    useEffect(() => {
        ////重置头像
        rmAvter()
        //// 通过form实例的方法   重置输入框
        formContent.setFieldValue('name', '')

    }, [flag])

    ////  输入框内容回显
    useMemo(()=>{
        ////避免一开始就弹框
        setOpen(false)
        if(!open){
            setOpen(editFlag)
            //!  这有问题
            formContent.setFieldValue('name', record?.cname)
            setImgurl(record?.cImg)
            setTitle('编辑信息')
        }
    },[record])

    const onFinish = (values: any) => {
        ////如果没有填写完整信息
        console.log('values', values);

        if (!values.inputValue || !values.imgurl) {
            message.error('请填写完整信息')
            // return
        } else {
            ////发起请求
            if(title === '添加信息'){
                api.addCategory(values.inputValue, values.imgurl)
                    .then(res => {
                        if (res.data.state) {
                            ////添加成功
                            message.success('添加成功')
                            ////更新列表 父组件传递下来的
                            getproduct()
                            ////通过这个开关控制 useEffect  请求成功后再重置内容
                            flag = !flag
                            //// 清空当前状态  为了让校验生效
                            inputValue = ''
                            setImgurl('')
                        }else{
                            message.error('已经存在该类目,请不要重复添加')
                        }
                    })

            }else{
                ////  修改信息发的请求
                api.updateCategory(values.inputValue,record?.cId)
                .then(res=>{
                    console.log(res);
                    if(res.data.state){
                        ////更新列表 父组件传递下来的
                        getproduct()
                    }
                })
            }




            setTimeout(() => {
                ////关闭 Dialog
                setOpen(false);
            }, 800);
        }
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    ////   点击添加的回调
    const showModal = () => {
        //! 改变重置逻辑的依赖
        flag = !flag
        setOpen(true);
        setTitle('添加信息')
    };

    ////  点击确定的回调
    const handleOk = () => {
        inputValue = formContent.getFieldValue('name')
        onFinish({ inputValue, imgurl })
        ////打开  确定动画
        setConfirmLoading(true);
        setTimeout(() => {
            ////关闭 确定动画
            setConfirmLoading(false);
        }, 1000);
    };

    ////  点击取消的回调
    const handleCancel = () => {
        setOpen(false);
    };

    ////  接收 upload 组件传过来的imgurl
    let handleImg = (imgurl: string) => {
        // console.log(imgurl);
        ////更新 imgurl 状态
        setImgurl(imgurl)
    }

    // //// 输入触发事件
    // let handleChange = (value: any) => {
    //     ////输入框的值
    //     setInputvalue(value)
    // }

    ////移除头像
    let rmImg = (props: any) => {
        // let delImg = props
        // console.log('props',props);
        //// 把传过来的函数拿到外面用
        rmAvter = props
    }


    return (
        <Fragment>
            <Button type='primary' onClick={showModal}>添加</Button>
            <Modal
                title={title}
                open={open}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                forceRender
            >
                <Form
                    form={formContent}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    // onValuesChange={handleChange}
                >
                    <Uploader onUpload={handleImg} rmImg={rmImg} editUrl={record?.cImg} />
                    <Form.Item

                        label="类目名称"
                        name="name"
                        rules={[{ required: true, message: '请输入类目名称' }]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </Fragment>

    )
}
export default Dialog

